import { Box, Center, Flex, flexbox, Image, Input, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import logo from '@/assets/img/logo.png';
import product_1 from '@/assets/img/product_1.png';
import product_2 from '@/assets/img/product_2.png';
import product_3 from '@/assets/img/product_3.png';
import product_4 from '@/assets/img/product_4.png';
import product_5 from '@/assets/img/product_5.png';
import product_discord from '@/assets/img/product_discord.png';
import product_telegram from '@/assets/img/product_telegram.png';
import product_twitter from '@/assets/img/product_twitter.png';
import product_explain from '@/assets/img/product_explain.png';

import jump from '@/assets/img/jump.png';
import addressIcon from '@/assets/img/address.png';
import { Alert, Button, Carousel, Divider, message, Modal, Progress } from 'antd';
import MyModal from '@/components/MyModal';
import { connect } from 'react-redux';
import { useDispatch } from 'react-redux'
import { useAccount, useSignMessage } from 'wagmi';
import { useRouter } from 'next/router';
import { queryBind, queryInit, queryProduct } from '@/services/product';
import { getQueryParams, toMillimeter } from '@/utils/utils';
import { useTranslation } from 'react-i18next';
import storage from '@/utils/storage';

// import Swiper from 'swiper/dist/js/swiper.min.js';
// import { Swiper, SwiperSlide } from 'swiper/react';
// import { Autoplay } from 'swiper';
// import 'swiper/css';

const currentOrderState = {
  FIRST: 1, // 本金收益阶段
  SECOND: 2, // 权益收益阶段
  THIRD: 3,  // 待撤回
  FOUTH: 4  // 已完成
}
const Product = ({ walletAddress, }: any) => {
  const [showModal, setShowModal] = useState(false);
  const [productType, setProductType] = useState('');
  const [myPorduct, setMyProduct] = useState('none'); // 当前选择的产品类型， 对于fixed定期，current活期，和none无购买情况，
  const [allInfo, setAllInfo] = useState({} as PruductInfo) // 首页所有数据
  const [ordersId, setOrdersId] = useState(0) // 活期撤回id
  const [ordersNum, setOrdersNum] = useState(0) // 活期撤回金额
  const [bndPrice, setBndPrice] = useState('') //BND价格 
  const [currentOrderInfo, setCurrentOrderInfo] = useState({} as CurrentOrderInfo) //活期产品信息 
  const [currentOrders, setCurrentOrders] = useState([] as CurrentOrders[]) //活期订单列表 
  const [fixedOrder, setFixedOrder] = useState({} as FixedOrder) //定期订单 
  const [fixedOrderInfo, setFixedOrderInfo] = useState({} as FixedOrderInfo) //定期产品信息 
  const [signMsg, setSignMsg] = useState('') //签名前消息 
  const [totalAmount, setTotalAmount] = useState('') //资产、金额 
  const [totalCurrentAmount, setTotalCurrentAmount] = useState('') //活期理财金额 
  const [totalFixedAmount, setTotalFixedAmount] = useState('') //定期理财金额 
  const [totalNum, setTotalNum] = useState(0) //地址数 
  const [walletList, setWalletList] = useState([] as WalletList[]) //资产数据 
  const [bannerList, setBannerList] = useState([] as Banner[])

  const [introduceModel, setIntroduceModel] = useState(false) // 产品说明弹窗
  const [bindErr, setBindErr] = useState(false) // 置灰绑定按钮

  const [addressModal, setAddressModal] = useState(false); // 绑定查询的弹窗
  const [introType, setIntroType] = useState('') // 产品类型
  const [inviteUrl, setInviteUrl] = useState('') // 获取url的address
  const [stateInfo, setStateInfo] = useState({} as QueryState) // 
  const [inviteVal, setInviterVal] = useState('') // 手动输入邀请链接



  const dispatch = useDispatch()
  const { address, isConnected, isDisconnected }: Account = useAccount();
  // 获取签名
  const { data: signatures, signMessageAsync } = useSignMessage({
    message: stateInfo && stateInfo.message,
  })

  const { t, i18n } = useTranslation();

  const router = useRouter();

  // 复制到粘贴板
  const goLink = () => {
    const myUrl = window.location.origin + window.location.pathname + `?address=${address}`
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard
        .writeText(myUrl)
        .then(() => {
          message.success('success')
        })
    } else {
      // 创建text area
      const textArea = document.createElement('textarea')
      textArea.value = myUrl
      // 使text area不在viewport，同时设置不可见
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      return new Promise((resolve, reject) => {
        // 执行复制命令并移除文本框
        document.execCommand('copy') ? resolve((res: any) => {
        }) : reject(new Error('出错了'))
        textArea.remove()
      }).then(
        () => {
          message.success("success");
        },
        () => {
          message.error("error");
        })
    }
  };


  // 关闭绑定弹窗
  const hideAddressModal = () => {
    setAddressModal(false);
  };

  // 接受邀请
  const confirmInvite = () => {
    // 无效的链接，手动输入调用
    if (bindErr) {
      const valParams: any = getQueryParams(inviteVal)
      const timestamp = Date.parse(new Date() as any);
      signMessageAsync().then(res => {
        if (res) {
          queryBind({ signature: res, inviter: valParams?.address || inviteVal, address: address }).then(res => {
            if (res.code === 0) { message.success('success'); setAddressModal(false); }
            else {
              message.error(res.msg)
            }
          })
        }
      })
    }
    // 有效的邀请人
    else {
      signMessageAsync().then(res => {
        if (res) {
          queryBind({ signature: res, inviter: stateInfo.inviter, address: address }).then(res => {
            if (res.code === 0) message.success('success')
            else { message.error(res.msg) }
          })
          setAddressModal(false);
        }
      })
    }
  }

  //初始化绑定
  const projectInit = async () => {
    const res: any = getQueryParams(window.location.href)
    const timestamp = Date.parse(new Date() as any);
    await queryInit({ inviter: res?.address || '', address: address, time: timestamp }).then((res) => {
      if (res.code === 0) {
        const stateInfo = res.data as QueryState
        setStateInfo(stateInfo)
        if (stateInfo.state === 0) {
          setAddressModal(true)
        } else if (stateInfo.state === 2) { // 拿不到inviter的情况下返回2
          //让用户将推荐地址复制到输入框然后调用bind接口
          setBindErr(true)
          setAddressModal(true)
        }
      } else {
        message.error(res.msg)
        setAddressModal(true);

      }
      if (res.data === null) {
        setTimeout(() => {
          projectInit()
        }, 200)
      }
    })

  }
  const productApi = async () => {
    const res: ApiRes = await queryProduct({ address })
    if (res.code !== 0) {
      message.error(res.msg)
    } else {
      const data = res.data as PruductInfo
      setAllInfo(data)
      setBndPrice(data.bndPrice)
      setCurrentOrderInfo(data.currentOrderInfo)
      setCurrentOrders(data.currentOrders)
      setFixedOrder(data.fixedOrder)
      setFixedOrderInfo(data.fixedOrderInfo)
      setSignMsg(data.message)
      setTotalAmount(data.totalAmount)
      setTotalCurrentAmount(data.totalCurrentAmount)
      setTotalFixedAmount(data.totalFixedAmount)
      setTotalNum(data.totalNum)
      setWalletList(data.walletList)
      setBannerList(data.bannerList)
      if (data.currentOrders && data.currentOrders.length > 0) {
        setMyProduct('current')
      } else if (data.fixedOrder) {
        setMyProduct('fixed')
      } else setMyProduct('none')
    }
  }

  // 初始化操作
  useEffect(() => {
    // 钱包断开重定向
    if (isDisconnected) {
      router.push('/')
    }
    //检查地址， 进行初始化操作
    if (address) {
      storage.localSet('address', address)
      dispatch({ type: 'ADDRESS', payload: address })
      projectInit()
      productApi()
    }
  }, [address, isDisconnected])

  // 选择产品
  const selectProduct = [
    {
      type: 'fixed',
      title: t('product.Time_deposit'),
      desc1: `${t('product.Daily_rate')} ${fixedOrderInfo.dailyProfitRate * 100}%`,
      desc2: t('product.Demand_desc'),
      img: product_2.src,
    },
    {
      type: 'current',
      title: t('product.Demand_deposit'),
      desc1: `${t('product.highest_yield')} ${currentOrderInfo.dailyProfitRate * 100}%`,
      desc2: t('product.highest_yield_desc'),
      img: product_3.src,
    },
  ];

  // 不可选的定期
  const fixedProdcut = [
    {
      type: 'fixed',
      title: t('product.Time_deposit'),
      desc1: `${t('product.Daily_rate')} ${fixedOrderInfo.dailyProfitRate * 100}%`,
      desc2: t('product.Demand_desc'),
      img: product_2.src,
    },
  ]

  // 不可选的活期
  const currentProduct = [{
    type: 'current',
    title: t('product.Demand_deposit'),
    desc1: `${t('product.highest_yield')} ${currentOrderInfo.dailyProfitRate * 100}%`,
    desc2: t('product.highest_yield_desc'),
    img: product_3.src,
  },]

  //定期产品
  const fixedProduct = [
    {
      id: '1',
      amount: fixedOrder?.investTotal,
      Yield: `${fixedOrder?.dailyProfitRate * 100} %`,
      yesterday: `${fixedOrder?.yesterdayProfitAmount}`,
      currentProfit: fixedOrder?.releasedAmount,
      allAmount: fixedOrder?.totalAmount,
    },
  ];


  // 购买产品
  const buyProduct = (type: string) => {
    setProductType(type);
    setShowModal(true);
  };

  // 增加理财
  const addProduct = (type: string) => {
    setProductType(type);
    setShowModal(true);
  };

  // 赎回操作
  const outProduct = (type: string, id: number, num: number) => {
    setProductType(type);
    setShowModal(true);
    setOrdersId(id)
    setOrdersNum(num)
  };

  // 弹窗的回调
  const isShowModal = (flag: boolean, reload: boolean) => {
    setShowModal(flag);
    // 重新刷新页面
    if (reload) productApi()
  };

  // 关闭产品说明弹窗
  const hideintroduceModal = () => {
    setIntroduceModel(false)
  }
  //产品说明按钮
  const showintroduceModel = (type: string) => {
    setIntroduceModel(true);
    setIntroType(type)
  };


  // 禁用缩放
  useEffect(() => {
    // 手动添加mate标签
    const addMeta = (name: string, content: string) => {
      const meta = document.createElement('meta');
      meta.content = content;
      meta.name = name;
      document.getElementsByTagName('head')[0].appendChild(meta);
    };
    addMeta(
      'viewport',
      'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover',
    );
  }, [])


  return (
    <Box w={'100%'}>
      <Box p={'0 20px'} w={'100%'} boxSizing="border-box">
        {/* 第一个卡片 */}
        <Box h={150} w={"100%"}>
          <Carousel autoplay dots={false}>
            {bannerList && bannerList.map((item, index) =>
              <Box key={index}>
                <Image src={item.imageUrl} alt={item.imageUrl} h={150} w={'100%'} ></Image>
              </Box>
            )}
          </Carousel>
          {/* <Swiper
            spaceBetween={20}
            autoplay
          // modules={[Autoplay]}
          >
            {bannerList && bannerList.map((item, index) =>
              <SwiperSlide key={index}>
                <Box >
                  <Image src={item.imageUrl} alt={item.imageUrl} h={150} w={'100%'} ></Image>
                </Box>
              </SwiperSlide>
            )}

          </Swiper> */}

        </Box>

        {/* 专属邀请连接 */}
        <Box>
          <Text mt={17} mb={8} lineHeight={'27px'} fontSize={18} color="#40414D">
            {t('product.Exclusive')}
          </Text>

          <InputGroup w={'100%'} h={36}>
            <Input
              flex={1}
              pl={17}
              pr={70}
              bgColor={'#DFF1FB'}
              border={0}
              borderTopRadius={4}
              borderLeftRadius={4}
              disabled
              value={address}
              style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
            />
            <InputRightElement>
              <Center w={55} h={36} bgColor="#375BE2" borderRightRadius={4} borderBottomRadius={4} onClick={goLink}>
                <Image src={jump.src} alt="jump" h={20}></Image>
              </Center>
            </InputRightElement>
          </InputGroup>
        </Box>

        {/* 全球资产 */}
        <Flex h={180} mt={14} borderRadius={4} bgColor={'white'} direction={'column'} pl={18} pt={12}>
          <Flex justify={'space-between'}>
            <Box mt={10}>
              <Text fontSize={12} lineHeight={'18px'} m={0} mb={9}>
                {t('product.assets')}
              </Text>
              <Text fontSize={24} lineHeight={'36px'} m={0} fontWeight={700}>
                $ {toMillimeter(totalAmount)}
              </Text>
            </Box>
            <Flex w={90} h={75} direction={'column'} justify={'space-around'} bgColor={'#375BE2'} borderRadius={'5px 0px 0px 5px'} p={10}>
              <Center>
                <Image src={addressIcon.src} w={14} h={16} alt="address"></Image>
              </Center>
              <Divider style={{ borderColor: 'white', margin: '10px 0', opacity: '0.2' }} />
              <Center>
                <Text fontSize={16} lineHeight={'24px'} m={0} color="white">
                  {toMillimeter(totalNum)}
                </Text>
              </Center>
            </Flex>
          </Flex>

          <Divider style={{ borderColor: '#DFDFDF', margin: '10px 0' }} />

          <Flex justify={'space-between'} mr={14}>
            <Box>
              <Text fontSize={12} lineHeight={'18px'} m={0} mb={9}>
                {t('product.Time_deposit_1')}
              </Text>
              <Text fontSize={18} lineHeight={'27px'} m={0} fontWeight={700}>
                $ {toMillimeter(totalFixedAmount)}
              </Text>
            </Box>

            <Box textAlign={'right'}>
              <Text fontSize={12} lineHeight={'18px'} m={0} mb={9}>
                {t('product.Demand_deposit_1')}
              </Text>
              <Text fontSize={18} lineHeight={'27px'} m={0} fontWeight={700}>
                $ {toMillimeter(totalCurrentAmount)}
              </Text>
            </Box>
          </Flex>
        </Flex>

        {/* 选择产品 */}
        {myPorduct === 'none' && (
          <Box>
            <Text mt={17} mb={8} lineHeight={'27px'} fontSize={18}>
              {t('product.Select_products')}
            </Text>
            {/* 未购买产品的情况 */}
            {selectProduct &&
              selectProduct.map((item) => (
                <Box key={item.type} m={'18px 0'} bgColor={'white'}>
                  <Flex w={'100%'} h={150} borderRadius={4} justify={'space-between'}>
                    <Box m={'15px 15px 10px'}>
                      <Text fontSize={18} fontWeight={600} m={0} lineHeight={'27px'} mb={8}>
                        {item.title}
                      </Text>
                      <Text fontSize={12} fontWeight={500} m={0} lineHeight={'18px'} mb={6}>
                        {item.desc1}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {item.desc2}
                      </Text>
                    </Box>

                    {/* 产品说明 */}
                    <Flex alignItems={'end'} direction={'column'} m={'15px 0px 0px'} flex={1} justify={'space-between'}>
                      <Flex justify={'end'} mr={15} onClick={() => { showintroduceModel(item.type) }}>
                        <Text fontSize={12} m={0} lineHeight={'18px'} color={'#375BE2'} mr={4}>
                          {t('product.Illustrate')}
                        </Text>
                        <Image src={product_explain.src} w={16} h={18} alt="explain"></Image>
                      </Flex>
                      <Image src={item.img} alt="product_1" h={90}></Image>
                    </Flex>
                  </Flex>

                  <Box w={'100%'} display={'flex'}>
                    <Button
                      type="primary"
                      style={{
                        margin: '8px 20px 15px',
                        flex: 1,
                        height: '40px',
                        fontSize: '18px',
                        fontWeight: '600',
                        backgroundColor: '#375BE2',
                      }}
                      onClick={() => buyProduct(item.type)}
                    >
                      {t('button.join_in')}
                    </Button>
                  </Box>
                </Box>
              ))}
          </Box>
        )}

        {/* 我的产品 ———— 定期 */}
        {myPorduct === 'fixed' && (
          <Box>
            <Text mt={17} mb={8} lineHeight={'27px'} fontSize={18} fontWeight={500}>
              {t('product.My_Products_Time_deposit')}
            </Text>
            {/* 定期理财情况 */}
            {fixedProduct &&
              fixedProduct.map((item) => (
                <Box key={item.id} m={'18px 0'} bgColor={'white'} h={360}>
                  <Flex w={'100%'} h={150} borderRadius={4} justify={'space-between'}>
                    <Box m={'15px 15px 10px'}>
                      <Text fontSize={18} fontWeight={600} m={0} lineHeight={'27px'} mb={8}>
                        {t('product.Time_deposit')}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Deposits')}
                      </Text>
                      <Text fontSize={24} fontWeight={700} m={0} lineHeight={'36px'} mb={6}>
                        $ {toMillimeter(item.amount)}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Daily_rate')} {item.Yield}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Demand_Yesterday_profit')} $ {toMillimeter(item.yesterday)}
                      </Text>
                    </Box>
                    {/* 产品说明 */}
                    <Flex alignItems={'end'} direction={'column'} m={'15px 0px 0px'} flex={1} justify={'space-between'}>
                      <Flex justify={'end'} mr={15} onClick={() => showintroduceModel('fixed')}>
                        <Text fontSize={12} m={0} lineHeight={'18px'} color={'#375BE2'} mr={4}>
                          {t('product.Illustrate')}
                        </Text>
                        <Image src={product_explain.src} w={16} h={18} alt="explain"></Image>
                      </Flex>
                      <Image src={product_2.src} alt="product_2" h={90} ></Image>
                    </Flex>
                  </Flex>
                  {/* 进度条 */}
                  <Box m={'30px 15px 20px'}>
                    <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                      {t('product.Demand_Income_amount')}
                    </Text>
                    <Progress percent={(item.currentProfit / item.allAmount) * 100} showInfo={false} strokeColor={{ from: '#6BD93E', to: '#3ED9C1' }} style={{ height: '25px' }} />
                    <Flex mt={9} justify={'space-between'}>
                      <Text fontSize={18} m={0} lineHeight={'27px'} fontWeight={700}>
                        $ {toMillimeter(item.currentProfit)}
                      </Text>
                      <Text fontSize={12} m={0} lineHeight={'18px'}>
                        $ {toMillimeter(item.allAmount)}
                      </Text>
                    </Flex>
                  </Box>

                  <Flex m={'8px 20px 15px'} justify={'space-around'}>
                    <Button
                      type="primary"
                      style={{
                        width: '140px',
                        height: '40px',
                        fontSize: '16px',
                        fontWeight: '600',
                        backgroundColor: '#375BE2',
                      }}
                      onClick={() => addProduct('fixed')}
                    >
                      {t('button.Invest')}
                    </Button>
                    <Button
                      type="primary"
                      style={{
                        width: '140px',
                        height: '40px',
                        fontSize: '16px',
                        lineHeight: '27px',
                        fontWeight: '600',
                        backgroundColor: '#45CCA2',
                        borderRadius: '4px',
                      }}
                      onClick={() => addProduct('limit')} // Limit是购买额度， 后面需要提取出来
                    >
                      {t('button.Quota')}
                    </Button>
                  </Flex>
                </Box>
              ))}

            {currentProduct && currentProduct.map(item => (
              <Box key={item.type} m={'18px 0'} bgColor={'white'}>
                <Flex w={'100%'} h={150} borderRadius={4} justify={'space-between'}>
                  <Box m={'15px 15px 10px'}>
                    <Text fontSize={18} fontWeight={600} m={0} lineHeight={'27px'} mb={8}>
                      {item.title}
                    </Text>
                    <Text fontSize={12} fontWeight={500} m={0} lineHeight={'18px'} mb={6}>
                      {item.desc1}
                    </Text>
                    <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                      {item.desc2}
                    </Text>
                  </Box>

                  {/* 产品说明 */}
                  <Flex alignItems={'end'} direction={'column'} m={'15px 0px 0px'} flex={1} justify={'space-between'}>
                    <Flex justify={'end'} mr={15} onClick={() => { showintroduceModel(item.type) }}>
                      <Text fontSize={12} m={0} lineHeight={'18px'} color={'#375BE2'} mr={4}>
                        {t('product.Illustrate')}
                      </Text>
                      <Image src={product_explain.src} w={16} h={18} alt="explain"></Image>
                    </Flex>
                    <Image src={item.img} alt="product_1" h={90}></Image>
                  </Flex>
                </Flex>

                <Box w={'100%'} display={'flex'}>
                  <Button
                    type="primary"
                    style={{
                      margin: '8px 20px 15px',
                      flex: 1,
                      height: '40px',
                      fontSize: '18px',
                      fontWeight: '600',
                      backgroundColor: '#C2C2C2',
                      color: '#FFFFFF'
                    }}
                    disabled
                    onClick={() => buyProduct(item.type)}
                  >
                    {t('button.join_in')}
                  </Button>
                </Box>
              </Box>
            ))}

          </Box>
        )}

        {/* 我的产品 ———— 活期 */}
        {myPorduct === 'current' && (
          <Box>
            <Text mt={17} mb={8} lineHeight={'27px'} fontSize={18}>
              {t('product.My_Product_Demand_Depositt')}
            </Text>
            {/* 活期理财情况 */}
            {currentOrders &&
              currentOrders.map((item: CurrentOrders, index) => (

                <Box key={index} m={'18px 0'} bgColor={'white'} h={390}>
                  <Flex w={'100%'} h={150} borderRadius={4} justify={'space-between'}>
                    <Box m={'15px 15px 10px'}>
                      <Text fontSize={16} fontWeight={600} m={0} lineHeight={'27px'} mb={8}>
                        {t('product.Demand_deposit')}#{index + 1}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Deposits')}
                      </Text>
                      <Text fontSize={24} fontWeight={700} m={0} lineHeight={'36px'} mb={6}>
                        $ {toMillimeter(item.investTotal)}
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Daily_rate')} {item.dailyProfitRate * 100} %
                      </Text>
                      <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                        {t('product.Demand_Yesterday_profit')} $ {toMillimeter(item.yesterdayProfitAmount)}
                      </Text>
                    </Box>
                    {/* 产品说明 */}
                    <Flex alignItems={'end'} direction={'column'} m={'15px 0px 0px'} flex={1} justify={'space-between'}>
                      <Flex justify={'end'} mr={15} onClick={() => showintroduceModel('current')}>
                        <Text fontSize={12} m={0} lineHeight={'18px'} color={'#375BE2'} mr={4}>
                          {t('product.Illustrate')}
                        </Text>
                        <Image src={product_explain.src} w={16} h={18} alt="explain"></Image>
                      </Flex>
                      <Image src={product_2.src} alt="product_2" h={90}></Image>
                    </Flex>
                  </Flex>
                  {/* 进度条 */}
                  <Box m={'30px 15px 20px'}>
                    <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                      {t('product.Demand_Income_amount')}
                    </Text>
                    <Progress percent={(item.releasedAmount / item.investTotal) * 100} showInfo={false} strokeColor={{ from: '#6BD93E', to: '#3ED9C1' }} style={{ height: '25px' }} />
                    <Progress percent={(item.releasedAmount - item.investTotal > 0) ? ((item.releasedAmount - item.investTotal) / item.investTotal) * 100 : 0} showInfo={false} strokeColor={{ from: '#D93E3E', to: '#D9903E' }} style={{ height: '25px' }} />
                    <Flex mt={9} justify={'space-between'}>
                      <Text fontSize={18} m={0} lineHeight={'27px'} fontWeight={700}>
                        $ {toMillimeter(item.releasedAmount)}
                      </Text>
                      <Text fontSize={12} m={0} lineHeight={'18px'}>
                        $ {toMillimeter(item.totalAmount)}
                      </Text>
                    </Flex>
                  </Box>

                  <Flex m={'8px 20px 15px'} justify={'space-around'}>
                    <Button
                      type="primary"
                      style={{
                        //   width: '140px',
                        flex: 1,
                        height: '40px',
                        fontSize: '16px',
                        fontWeight: '600',
                        backgroundColor: item.state !== currentOrderState.FIRST ? "#C3C3C3" : '#44CBA2',

                      }}
                      disabled={item.state !== currentOrderState.FIRST}
                      onClick={() => outProduct('redeem', item.id, item.investTotal)} // 撤回本金对应字段
                    >
                      {t('button.Withdraw_principal')}
                    </Button>
                  </Flex>
                </Box>
              ))}

            {/* 继续购买理财 */}
            <Box m={'8px 20px 15px'}>
              <Button
                type="primary"
                style={{
                  width: '100%',
                  flex: 1,
                  height: '40px',
                  fontSize: '16px',
                  fontWeight: '600',
                  backgroundColor: '#375BE2',
                }}
                onClick={() => buyProduct('current')} // 撤回本金对应字段
              >
                {t('button.Buy_again')}
              </Button>
            </Box>

            {fixedProdcut && fixedProdcut.map(item => (
              <Box key={item.type} m={'18px 0'} bgColor={'white'}>
                <Flex w={'100%'} h={150} borderRadius={4} justify={'space-between'}>
                  <Box m={'15px 15px 10px'}>
                    <Text fontSize={18} fontWeight={600} m={0} lineHeight={'27px'} mb={8}>
                      {item.title}
                    </Text>
                    <Text fontSize={12} fontWeight={500} m={0} lineHeight={'18px'} mb={6}>
                      {item.desc1}
                    </Text>
                    <Text fontSize={12} m={0} mt={12} lineHeight={'18px'}>
                      {item.desc2}
                    </Text>
                  </Box>

                  {/* 产品说明 */}
                  <Flex alignItems={'end'} direction={'column'} m={'15px 0px 0px'} flex={1} justify={'space-between'}>
                    <Flex justify={'end'} mr={15} onClick={() => { showintroduceModel(item.type) }}>
                      <Text fontSize={12} m={0} lineHeight={'18px'} color={'#375BE2'} mr={4}>
                        {t('product.Illustrate')}
                      </Text>
                      <Image src={product_explain.src} w={16} h={18} alt="explain"></Image>
                    </Flex>
                    <Image src={item.img} alt="product_1" h={90}></Image>
                  </Flex>
                </Flex>

                <Box w={'100%'} display={'flex'}>
                  <Button
                    type="primary"
                    style={{
                      margin: '8px 20px 15px',
                      flex: 1,
                      height: '40px',
                      fontSize: '18px',
                      fontWeight: '600',
                      backgroundColor: '#C2C2C2',
                      color: '#FFFFFF'
                    }}
                    disabled
                    onClick={() => buyProduct(item.type)}
                  >
                    {t('button.join_in')}
                  </Button>
                </Box>
              </Box>
            ))}
          </Box>
        )}

        {showModal && <MyModal type={productType} data={{ ProductInfo: allInfo, investTotal: ordersNum, ordersId }} isShowModal={isShowModal} />}

        {introduceModel && (
          <Modal title={<Box fontSize={18}>{introType === 'fixed' ? t('product.Time_Deposit_Introduction') : t('product.Demand_deposit_introduction')}</Box>} footer={null} onCancel={hideintroduceModal} open={introduceModel}>
            <Box>

              {introType === 'fixed' && (<Box>
                <p>{t('product.Time_Deposit_1')}</p>
                <p>{t('product.Time_Deposit_2')}</p>
                <p>{t('product.Time_Deposit_3')}</p>
                <p>{t('product.Time_Deposit_4')}</p>
                <p>{t('product.Time_Deposit_5')}</p>
                <p>{t('product.Time_Deposit_6')}</p>
                <p>{t('product.Time_Deposit_7')}</p>
                <p>{t('product.Time_Deposit_8')}</p>
                <p>{t('product.Time_Deposit_9')}</p>
              </Box>)}
              {introType === 'current' && (<Box>
                <p>{t('product.Demand_deposit_introduction_1')}</p>
                <p>{t('product.Demand_deposit_introduction_2')}</p>
                <p>{t('product.Demand_deposit_introduction_3')}</p>
                <p>{t('product.Demand_deposit_introduction_4')}</p>
                <p>{t('product.Demand_deposit_introduction_5')}</p>
                <p>{t('product.Demand_deposit_introduction_6')}</p>
                <p>{t('product.Demand_deposit_introduction_7')}</p>


              </Box>)}
            </Box>
          </Modal>
        )}
        {/* 购买产品的情况下显示分享信息 */}
        {myPorduct !== 'none' && (
          <Box>
            <Text mt={17} mb={8} lineHeight={'27px'} fontSize={18}>
              {t('product.My_share')}
            </Text>
            <Box m={'18px 0'} bgColor={'white'} h={250} p={'18px 8px 0px'}>
              <Flex justify={'flex-start'} align="center">
                <Image src={product_4.src} w={45} h={40} alt="lv"></Image>
                <Text m={'15px 0 8px 20px'} lineHeight={'36px'} fontSize={24}>
                  V {allInfo.level}
                </Text>
              </Flex>
              <Divider style={{ borderColor: '#DFDFDF', margin: '10px 0' }} />
              <Box>
                <Text m={'15px 0 8px 20px'} lineHeight={'27px'} fontSize={18} fontWeight={700}>
                  {t('product.Team_reward')}
                </Text>
                <Text m={'0px 0 8px 20px'} lineHeight={'36px'} fontSize={24} fontWeight={700}>
                  $ {toMillimeter(allInfo.teamAwardAmount)}
                </Text>
              </Box>
              <Divider style={{ borderColor: '#DFDFDF', margin: '10px 0' }} />
              <Box>
                <Text m={'15px 0 8px 20px'} lineHeight={'18px'} fontSize={12}>
                  {t('product.team_earnings')}
                </Text>
                <Text m={'0px 0 8px 20px'} lineHeight={'27px'} fontSize={18} fontWeight={700}>
                  $ {toMillimeter(allInfo.yesterdayTeamAmount)}
                </Text>
              </Box>
            </Box>
          </Box>
        )}

        {addressModal && (
          <Modal title={<Box fontSize={18}>{t('modal.Share_address')}</Box>} footer={null} onCancel={hideAddressModal} open={addressModal}>
            <Box minH={100}>

              <Box m={'20px 0px'}>
                {!bindErr && (
                  <Text m={0} mt={4} fontSize={10} lineHeight={'15px'} color={'#8C8C8C'}>
                    {t('init.user')}{stateInfo.inviter}{t('init.join_blo')}
                  </Text>
                )}
                {bindErr && (
                  <Box>

                    <Text m={0} mt={4} fontSize={10} lineHeight={'15px'} color={'#8C8C8C'}>
                      {t('modal.bind_Tip')}
                    </Text>
                    <Input
                      style={{ height: '30px', paddingLeft: '17px', width: '90%', backgroundColor: '#DEF0FB', border: '0px', borderRadius: '4px', margin: '15px 0' }}
                      placeholder=""
                      value={inviteVal}
                      onChange={(val) => {
                        setInviterVal(val.target.value)
                      }}
                    />
                  </Box>
                )}
              </Box>
              <Box w={'100%'} display={'flex'}>
                <Button
                  type="primary"
                  style={{
                    margin: '8px 20px 15px',
                    flex: 1,
                    height: '40px',
                    fontSize: '18px',
                    fontWeight: '600',
                    // backgroundColor: !inviteVal ? '#DEF0FB' : '#375BE2',
                    color: '#fff'
                  }}
                  // disabled={!inviteVal}
                  onClick={confirmInvite}
                >
                  {t('button.Bind_invitation')}
                </Button>
              </Box>

            </Box>
          </Modal>
        )
        }


        {/* 底部联系方式 */}
        <Flex m={'45px 0 60px'} justify={'space-evenly'}>
          <Flex align={'center'}>
            <Image src={product_twitter.src} w={15} h={13} alt="twitter"></Image>
            <Text lineHeight={'18px'} fontSize={12} m={0} pl={5}>
              Twitter
            </Text>
          </Flex>
          <Box> | </Box>
          <Flex align={'center'}>
            <Image src={product_telegram.src} w={15} h={13} alt="telegram"></Image>
            <Text lineHeight={'18px'} fontSize={12} m={0} pl={5}>
              Telegram
            </Text>
          </Flex>
          <Box> | </Box>
          <Flex align={'center'}>
            <Image src={product_discord.src} w={15} h={13} alt="discord"></Image>
            <Text lineHeight={'18px'} fontSize={12} m={0} pl={5}>
              Discord
            </Text>
          </Flex>
        </Flex>
      </Box >
    </Box >

  );
};

export default connect(({ walletAddress }) => ({ walletAddress }))(Product);


